<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>详情</h1>
    <a href="mycart.html">我的购物车</a>
    <div id="box">
        <!-- <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="button" name="" id="" value="保存"> -->
    </div>
    <script src="./axios.min.js"></script>
    <script>
        // 商品列表 跳转过来  update.html?pid=xxxxx
        // 获取商品的pid
        location.search //获取搜索字段  
        console.log(location.search); // ?pid=410247&aa=23
        // pid后面的 值 

        // URLSearchParams  将搜索字段 转为对象
        let obj = new URLSearchParams(location.search)
        // get方法获取对应的参数
        let pid = obj.get('pid')
        console.log(pid);
        let uid = localStorage.getItem('uid')


        // 将要修改商品信息 放在输入框 
        // 根据pid 获取商品信息 （接口）

        //         根据商品id获取商品详情接口

        //  接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
        // 接口请求方式：get
        // 接口参数：
        // id  商品的id
        // 使用方式
        // 获取id为1的商品的详情
        // http://jx.xuzhixiang.top/ap/api/detail.php?id=1
        // 服务器返回json数据
        let detailAPI = 'http://jx.xuzhixiang.top/ap/api/detail.php'
        let params = {
            id: pid
        };
        console.log(params);
        axios.get(detailAPI, {
                params
            })
            .then(res => {
                // 成功 
                console.log(res.data);
                let pObj = res.data.data;
                console.log(pObj);

                let html = ` 
                            <h1>${pObj.pname}</h1>
                            <p>${pObj.pprice}</p>
                            <img src="${pObj.pimg}"/>
                            <p>${pObj.pdesc}</p>
                            <input type="button" value="+" id="add-btn"/>
                            <input type="text" value="1" id="num-ipt"/>
                            <input type="button" value="-" id="sub-btn"/>

                            <input type="button" name="" id="add-cart-btn" value="加入购物车">
                            
                            `

                let box = document.querySelector('#box')
                box.innerHTML = html;
                // 页面有了输入框  按钮
                let addCartBtn = document.querySelector('#add-cart-btn')
                console.log(addCartBtn);



                // 数量的控制 加 减 
                let addBtn = document.querySelector("#add-btn")
                let subBtn = document.querySelector("#sub-btn")
                let numIpt = document.querySelector("#num-ipt");

                if (numIpt.value == 1) {
                    subBtn.disabled = true;
                } else {
                    subBtn.disabled = false;
                }

                addBtn.onclick = function () {
                    let n = parseInt(numIpt.value);
                    n++;
                    numIpt.value = n;
                    if (n > 1) {
                        subBtn.disabled = false;
                    }
                }
                subBtn.onclick = function () {
                    let n = parseInt(numIpt.value);
                    if (n == 1) {
                        return;
                    }
                    n--;
                    numIpt.value = n;
                    if (n == 1) {
                        subBtn.disabled = true;
                    }
                }

                // 加入购物车的时候  uid pid pnum
                addCartBtn.onclick = async function () {
                    let pnum = numIpt.value;
                    let params = {
                        uid,
                        pid,
                        pnum
                    };
                    let url = 'http://jx.xuzhixiang.top/ap/api/add-product.php'
                    /* 给用户购物车中添加商品 接口

     接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
     接口请求方式：get
     接口参数：
          uid  用户id
          pid  商品id
          pnum  要添加的商品数量 */
                    let res = await axios.get(url, {
                        params
                    })
                    console.log(res.data);
                    alert('加入购物车成功')


                }


            })
        // 页面有了输入框  按钮
        let saveBtn = document.querySelector('#save-btn')
        console.log(saveBtn); // null;  按钮是在请求成功以后才有
    </script>

</body>

</html>